// --------------------------------------------登录页面-----------------------------------------------
import React, { useState } from "react";
import { Toast } from "antd-mobile";
import styles from "../style/login.module.css";
// 图片需要根据实际路径导入
import logoImg from "../img/lhsc.png";
import otherLoginImg from "../img/WX.png";
import popmenImg from "../img/popmen.png";
import suoImg from "../img/suo.png";
import { useNavigate } from "react-router-dom";
import { login } from "../api/login";
function LoginPage() {
  const [tel, setTel] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);

  const handleLogin = () => {
    // 合并非空校验
    if (!tel.trim() || !password.trim()) {
      Toast.show({ content: "请完善信息", icon: "fail" });
      return;
    }

    // 手机号格式校验
    if (!/^1\d{10}$/.test(tel)) {
      Toast.show({ content: "手机号格式错误", icon: "fail" });
      return;
    }

    // 密码格式校验（示例：6-20位）
    if (!/^\w{6,10}$/.test(password)) {
      Toast.show({ content: "密码需6-10位", icon: "fail" });
      return;
    }

    login({
      username: tel,
      password: password,
    })
      .then((res: any) => {
        console.log(res.data);
        if (res.data.code === 1) {
          // 根据实际接口返回判断
          localStorage.setItem("user", JSON.stringify(res.data)); // 存储用户信息
          Toast.show({
            content: "登录成功",
            icon: "success",
            afterClose: () => navigate("/home", { replace: true }), // 跳转首页
          });
        } else if (res.data.code === 0) {
          const msg = res.data.msg;
          // 账号密码不正确
          Toast.show({
            content: msg,
            icon: "fail",
          });
        }
      })
      .catch(() => {
        Toast.show({ content: "请求失败，请重试", icon: "fail" });
      });
  };
  const navigate = useNavigate();

  // 跳转到注册页面
  const target = () => {
    navigate("/enroll");
  };
  return (
    <div className={styles.big}>
      {/* 图片标识 */}
      <div className={styles.image}>
        <img src={logoImg} alt="logo" className={styles.img} />
      </div>

      {/* 输入框 */}
      <div className={styles.input}>
        <div>
          <img src={popmenImg} alt="账号图标" />
          <input
            type="tel"
            placeholder="请输入账号"
            value={tel}
            onChange={(e) => setTel(e.target.value)}
          />
        </div>
        <div>
          <img src={suoImg} alt="密码图标" />
          <input
            type="password"
            placeholder="请输入密码"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
      </div>

      {/* 登录按钮 */}
      <div className={styles.register} onClick={handleLogin}>
        登  录
      </div>

      {/* 注册链接 */}
      <p className={styles.login} onClick={target}>
        {" "}
        没有账号？前往注册{" "}
      </p>

      {/* 其他登录方式 */}
      <div className={styles.it}>
        <div className={styles.its}>
          <p>其他登录方式</p>
          <img src={otherLoginImg} alt="其他登录" />
        </div>
        <p className={styles.text}>@此版权为大喇叭编程实训基地所有</p>
      </div>
    </div>
  );
}

export default LoginPage;
